import React, { Component } from 'react';
import LoginForm from './loginForm';
export default class LoginPanel extends Component {
  componentDidMount() {
    sessionStorage.clear();
  }

  render() {
    return (
      <div style={styles.container}>
        <div style={styles.content}>
          <div style={styles.contentLeft}>
          <div style={styles.title}>WeShare数据共享交换平台</div>
          <div style={styles.logo}></div>
          </div>
          <div style={styles.formStyle}>
            <div style={styles.formContent}>
              <div style={styles.loginTitle}>登录</div>
              <LoginForm />
              <div style={styles.emailContent}><div style={styles.emailStyle}><img style={styles.imgStyle} src={require('./images/u9.png')} /></div></div>
            </div>
          </div>
        </div>
        <div style={styles.footer}>
          <span>WeShare大数据平台让您的数据焕发全新生产力</span>
          <span style={{ marginLeft: '20px' }}>|</span>
          <span style={{ marginLeft: '20px' }}>版权所有@河钢数字技术股份有限公司</span>
        </div>
      </div>
    );
  }
}

const styles = {
  loginTitle: {
    textAlign: 'center',
    fontFamily: 'Arial Normal Arial',
    fontWeight: '400',
    fontStyle: 'normal',
    fontSize: '20px',
    color: '#007CD4',
    margin: '20px 0'

  },
  container: {
    display: 'flex',
    flex: 'auto',
    backgroundColor: ' #007CD4',
    margin: ' 0 -24px -24px',
    minHeight: ' inherit',
    flexDirection: 'column'
  },
  title: {
    color: '#fff',
    fontSize: '54px',
    textAlign: 'left',
    fontFamily: 'Arial Negreta Arial Normal Arial',
    fontWeight: '700',
    fontStyle: 'normal',
  },
  contentLeft:{
    position: 'absolute',
    width:'50%',
    bottom:'0',
    left: '12%',
  },
  logo: {
    width: '550px',
    height: '450px',
    marginTop:'20px',
    backgroundImage: `url(${require('./images/u14.png')})`,
    backgroundSize: 'cover',
  },
  content: {
    flex: 'auto',
    width: '100%',
    position: 'relative'
  },
  footer: {
    width: '100%',
    height: '30px',
    margin: '18px auto',
    fontSize: '18px',
    textAlign: 'center',
    color: '#AEAEAE',
    fontFamily: 'Arial Negreta Arial Normal Arial',
    fontWeight: '400',
    fontStyle: 'normal',
  },
  formStyle: {
    position: 'absolute',
    width: '420px',
    height: '404px',
   bottom:'10%',
  left:'62%',
    backgroundColor: '#A9CEE9',
    borderRadius: '8px',
  },
  formContent: {
    position: 'absolute',
    top: '0',
    left: '0',
    right: '0',
    bottom: '0',
    margin: '0 30px ',
  },
  emailStyle: {
    position: 'relative',
    width: '47px',
    height: '47px',
    backgroundImage: `url(${require('./images/u10.png')})`,
    backgroundSize: '47px',
    borderRadius: '50px',
    display: 'inline-block',


  },
  emailContent: {
    marginTop: '24px',
    width: '100%',
    textAlign: 'center',
    padding: '0 20px'
  },
  imgStyle: {
    display: 'block',
    position: 'absolute',
    top: '14px',
    left: '13px',
    right: '0',
    bottom: '0',
    width: '21px',
    height: '19px',
  }
};
